<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>
    <el-row>
      <el-col :span="24">
        <div class="panel-group1">
          <div class="row_a_c mb_20">
            <div class=" f_24 f_bold">合同管理</div>
          </div>

          <el-form :model="queryParams" :rules="rules" ref="queryForm" label-width="100px" class="demo-ruleForm">
            <div class="row " style="margin-left: -16px;">

              <el-form-item class="itembox box2" label="合同编号：">
                <el-input clearable v-model="queryParams.number"></el-input>
              </el-form-item>
              <el-button style="height: 36px;width: 86px;" type="primary" @click="handleQuery">查询</el-button>
              <el-button style="height: 36px;width: 86px;" @click="resetQuery">清空</el-button>
            </div>
          </el-form>

          <el-button type="primary" class="mb_20" @click="gdAdd">新增合同</el-button>

          <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" v-loading="loading">

            <el-table-column prop="id" label="编号" align="center"></el-table-column>
            <el-table-column prop="name" label="合同名称" align="center"></el-table-column>
            <el-table-column prop="number" label="合同编号" align="center"></el-table-column>
            <el-table-column prop="game" label="签约游戏" align="center"></el-table-column>
            <el-table-column prop="start_time" label="生效时间" align="center"></el-table-column>
            <el-table-column prop="end_time" label="合同到期" align="center"></el-table-column>

            <el-table-column label="操作" align="center" width="350px">
              <template slot-scope="scope">
                <el-button size="mini" type="primary">
                  <a :href="scope.row.attachment">下载</a>
                </el-button>
              </template>
            </el-table-column>
          </el-table>


          <pagination v-show="total>0" :total="total" :page.sync="queryParams.noPage" :limit.sync="queryParams.pageSize" @pagination="getList" />


        </div>
      </el-col>
    </el-row>


    <el-dialog center :title="title" :visible.sync="open" width="38%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">

        <el-form-item label="合同名称" prop="title" align="right">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="合同编号" prop="title" align="right">
          <el-input v-model="form.number" placeholder="请输入" />
        </el-form-item>

        <el-form-item label="签约游戏" prop="title" align="right">
          <el-input v-model="form.game" placeholder="请输入" />
        </el-form-item>

        <!--        <el-form-item label="合同图片">
          <el-upload :action="upload_url" list-type="picture-card" :on-success="handleChangePho" :file-list="phoFiles"
            :on-remove="handleRemovePho" :show-file-list="true">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item> -->


        <el-form-item label="上传附件">
          <el-upload class="upload-demo" :limit="1" :action="upload_url" :on-remove="handleRemove" :on-change="handleChange" :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="开始时间" prop="begin_at">
          <el-date-picker v-model="form.start_time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="end_at">
          <el-date-picker v-model="form.end_time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input :rows="4" v-model="form.remark" type="textarea" placeholder="请输入"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer center" v-if="!ulid">

        <div class="quxiao">
          <el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="cancel">取消</el-button>
        </div>

        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 消息内容测试不能删除 -->
    <el-dialog center :visible.sync="testss" width="38%" append-to-body>
      <el-form ref="form" :model="formtest" label-width="100px" label-position="left">
        <el-form-item label="用户id" align="right">
          <el-input v-model="formtest.user_id" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="消息内容" prop="title" align="right">
          <el-input v-model="formtest.content" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitFormTest">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 消息内容测试不能删除 -->






  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import Vue from 'vue';
  import Navvz from "@/components/Navvz";
  import Sidebartss from "@/components/Sidebartss";
  import * as Work from "@/api/operation/work";
  import * as Contract from "@/api/operation/contract";

  import * as Auth from '@/utils/auth';
  export default {
    name: 'Index',
    components: {
      Navvz,
      Sidebartss,

    },
    data() {
      return {
        testss: false,
        formtest: {},
        // 总条数
        total: 0,
        title: '',
        ulid: '',
        userId: '',
        nickname: '',
        upload_url: process.env.VUE_APP_BASE_URL + '/file/upload',
        form: {},
        open: false, //工单显示
        fileList: [],
        loading: false,
        phoFiles: [],


        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10,
          filter: {
            order_number: null,
            state: null,
            time: null,
          },

        },
        // 日期范围
        dateRange: [],
        tableData: [],
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: "合同名称不能为空",
            trigger: "blur"
          }],
          number: [{
            required: true,
            message: '合同编号不能为空',
            trigger: 'change'
          }],
          game: [{
            required: true,
            message: '签约游戏不能为空',
            trigger: 'change'
          }],
          start_time: [{
            required: true,
            message: '生效时间不能为空',
            trigger: 'change'
          }],
          end_time: [{
            required: true,
            message: '合同到期不能为空',
            trigger: 'change'
          }],
        },

      }
    },
    created() {

      // 读取缓存
      this.nickname = localStorage.getItem('username')
      this.userId = localStorage.getItem('user_id')
      this.getList();

    },

    mounted() {

    },
    methods: {

      //文件上传成功调用
      handleChange(file, fileList) {
        this.fileChange(fileList);
      },

      //文件移出
      handleRemove(file, fileList) {
        this.fileChange(fileList);
      },

      // 设置file值--文件上传拼接数据
      fileChange(fileList) {
        let temp_str = '';
        if (fileList.length > 0) {
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].response) {
              if (fileList[i].response.code === 200) {
                if (i === 0) {
                  temp_str += fileList[i].response.data;
                } else {
                  // 最终photo的格式是所有已上传的图片的url拼接的字符串（逗号隔开）

                  temp_str += ',' + fileList[i].response.data;
                }
              }
            }
          }
        }
        this.form.attachment = temp_str;
        // this.form.attachment = temp_str.split(',');
      },


      //相册上传成功调用
      handleChangePho(res, file, fileList) {
        this.phoChange(fileList);
      },

      //图片移出
      handleRemovePho(file, fileList) {
        this.phoChange(fileList);
        console.log('fileList', fileList);
      },


      // 设置photo值--图片上传拼接数据
      phoChange(fileList) {
        let temp_str = '';
        if (fileList.length > 0) {
          for (let i = 0; i < fileList.length; i++) {
            if (fileList[i].response) {
              if (fileList[i].response.code === 200) {
                if (i === 0) {
                  temp_str += fileList[i].response.data;
                } else {
                  // 最终photo的格式是所有已上传的图片的url拼接的字符串（逗号隔开）

                  temp_str += ',' + fileList[i].response.data;
                }
              }
            }
          }
        }

        this.form.attachment = temp_str;
        // this.form.attachment = temp_str.split(',');

      },





      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.number = null,
          this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.noPage = 1;
        this.getList();
      },


      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.title = '工单详情'
        this.ulid = row.ulid
        var peres = {};
        peres.workOrder = row.ulid
        peres.type_pj = 1
        Work.Show(peres).then(response => {
          this.form.title = response.data.info.title;
          this.form.type = response.data.info.type.ulid;
          this.form.detail = response.data.info.detail;
          this.form.contactPerson = response.data.info.contact_person;
          this.form.contactPhone = response.data.info.contact_phone;
          this.form.remark = response.data.info.remark;
          var _this = this;
          if (response.data.info.screenshot) {
            response.data.info.screenshot.forEach(function(item, index) {
              var per = {
                url: item
              }
              _this.phoFiles.push(per)
            });
          }
          if (response.data.info.attachment) {
            response.data.info.attachment.forEach(function(item, index) {
              var per = {
                name: '文件' + (index + 1),
                url: item
              }
              _this.fileList.push(per)
            });
          }
          this.open = true;
        });
      },





      // 表单重置
      reset() {
        this.fileList = [];
        this.phoFiles = [];
        this.form = {};
        this.resetForm("form");
      },

      /** 查询数据库配置列表 */
      getList() {
        this.queryParams.user_id = this.userId
        this.queryParams.platform = 'biqi-merchant-platform'
        this.queryParams.type_pj = 1
        this.loading = true;
        Contract.getList(this.queryParams).then(response => {
          this.tableData = response.data.list;
          this.total = response.data.pagination.totalCount;
          this.loading = false;
        });
      },




      /** 删除按钮操作 */
      handleDelete(row) {
        var peres = {};
        peres.workOrder = row.ulid
        peres.type_pj = 1
        this.$modal.confirm('是否确认删除').then(function() {
          return Work.Delete(peres);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },





      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.form.user_id = this.userId
            this.form.platform = 'biqi-merchant-platform'
            this.form.type_pj = 1
            this.loading = true;
            Contract.Add(this.form).then(response => {
              this.$modal.msgSuccess('新增成功');
              this.open = false;
              this.loading = false;

              this.getList();
            });

          }
        });
      },

      //新增消息---测试
      submitFormTest() {
        this.formtest.platform = 'biqi-merchant-platform'
        this.formtest.type_pj = 1
        Contract.addMessage(this.formtest).then(response => {
          console.log('data-data', response.data)
        });
      },


      // 取消按钮
      cancel() {
        this.open = false;
      },


      //添加合同 按钮
      gdAdd() {
        this.title = '添加合同';
        this.form = {};
        this.ulid = '';
        this.open = true;
        this.reset()

      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
    // padding: 5px 0 15px 40px;
  }

  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 760px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .ddfbzy {
    width: 112px;
    height: 32px;
    background: #FFDBDB;
    border-radius: 4px;
  }

  .zzcl {
    width: 112px;
    height: 32px;
    background: #DBE2FF;
    border-radius: 4px;
  }

  .yhfk {
    width: 112px;
    height: 32px;
    color: #FFFFFF;
    background: #306EF2;
    border-radius: 4px;
  }

  .ywj {
    width: 112px;
    height: 32px;
    background: #E3E3E3;
    border-radius: 4px;
  }

  .itembox {
    margin-right: 45px;

  }

  ::v-deep .el-button--primary {
      color: #FFFFFF;
      background-color: #3FC1C9 !important;
      border-color: #3FC1C9 !important;
  }

    ::v-deep .el-button:hover,
    .el-button:focus {
      color: #000000;
      border-color: #A5EDF1;
      background-color: #A5EDF1;
    }

  ::v-deep .el-rate__icon {
    font-size: 38px;
  }
</style>
